<template>
	<view class="container">
		<view class="pr height_160 box p_12"
			style="background: linear-gradient( 169deg, #F08519 0%, #F08519 30%, #F08519 65%, rgba(240,133,25,0) 100%);">
			<view class="fc_fff">
				<view class="fz_16 fb">
					订单信息
				</view>
				<view class="mt_12">
					消费订单：{{topData.orderCountTotal||0}} 总消费：{{topData.sumPrice||0}}
				</view>
			</view>
			<view class="pa l_12 r_12 bc_fff br_8 height_90 plr_28 box fx aic jcb" style="bottom: -24rpx;">
				<view class="top_menu_item fx fx_col aic" @click="handleClickTab(0)">
					<view>
						全部
					</view>
					<view class="fz_18 fb mt_12">
						{{topData.orderCountTotal||0}}
					</view>
				</view>
				<view class="top_menu_item fx fx_col aic" @click="handleClickTab(1)">
					<view>
						待确认
					</view>
					<view class="fz_18 fb mt_12">
						{{topData.unConfirmCount||0}}
					</view>
				</view>
				<view class="top_menu_item fx fx_col aic" @click="handleClickTab(2)">
					<view>
						待支付
					</view>
					<view class="fz_18 fb mt_12">
						{{topData.unPaidCount||0}}
					</view>
				</view>
				<view class="top_menu_item fx fx_col aic" @click="handleClickTab(3)">
					<view>
						待收货
					</view>
					<view class="fz_18 fb mt_12">
						{{topData.unReceiveCount||0}}
					</view>
				</view>
				<view class="top_menu_item fx fx_col aic" @click="handleClickTab(4)">
					<view>
						待安装
					</view>
					<view class="fz_18 fb mt_12">
						{{topData.unInstallCount||0}}
					</view>
				</view>
				<view class="tab_bottom_line width_42 height_2 br_4 bc_primary pa l_0 b_0 transition"
					:style="[tabLineStyle]">
				</view>
			</view>
		</view>
		<view class="plr_12 mt_20">
			<view class="list_item mt_8" v-for="item,index in dataList" :key="index">
				<OrderItem :data="item" @cancel="handleCancel" @confirm="handleConfirm" @delete="handleDelete" />
			</view>
			<view class="pt_16">
				
				<u-loadmore :status="loadingStatus" />
			</view>
		</view>
	</view>
</template>

<script>
	import api from '@/service/config/api.js'
	import OrderItem from '../components/OrderItem.vue'
	import dataMixin from '@/mixins/data.js'
	import {
		mapState
	} from 'vuex'
	export default {
		mixins: [dataMixin],
		components: {
			OrderItem
		},
		data() {
			return {
				dataList: [],
				tabItemLeft: [],
				tabItemWidth: uni.upx2px(84),
				activeIndex: null,
				topData: {}, // 头部数据
				listUrl: '/order/api/order/pageList',
				params: {},
			};
		},
		computed: {
			...mapState(['userType', 'appType']),
			tabLineStyle() {
				return {
					transform: `translateX(${this.tabItemLeft[this.activeIndex] + 'px'})`
				}
			}
		},
		onLoad(options) {
			let active = options.status || 0
			if (active == 0) {
				const {
					orderStatus,
					...params
				} = this.params
				this.params = params
			} else {
				this.$set(this.params, 'orderStatus', this.getOrderStatus(active))
			}
			uni.createSelectorQuery().in(this).selectAll('.top_menu_item')
				.boundingClientRect(
					data => {
						if (data.length) {
							this.tabItemLeft = data.map(item => {
								if (this.tabItemWidth > item.width) {
									return item.left - (this.tabItemWidth - item.width) / 2 - uni.upx2px(24)
								} else {
									return item.left + (item.width - this.tabItemWidth) / 2 - uni.upx2px(24)
								}
							})
							this.activeIndex = options.status || 0
						}
					}).exec()
		},
		onShow() {
			this.getAllData()
		},
		onHide() {
			uni.pageScrollTo({
				scrollTop: 0, //距离页面顶部的距离
				duration: 0
			});
		},
		methods: {
			getAllData() {
				this.$utils.loading()
				Promise.all([this.getTopData(), this.getData(true, true)]).then(res => {
					uni.hideLoading()
				})
			},
			getTopData() {
				return new Promise((resolve, reject) => {
					api.get('/order/api/order/data').then(res => {
						this.topData = res.data
					}).finally(() => {
						resolve()
					})
				})
			},
			getData(refresh = false, noHideLoading = false) {
				return new Promise((resolve, reject) => {
					this.isSearching = true
					if (refresh) {
						this.current = 1
						this.total = 1
						this.end = false
						this.$utils.loading()
					} else {
						this.loading = true
					}
					if (this.listUrl) {
						api.get(this.listUrl, {
							current: this.current,
							size: this.size,
							...this.params ? this.params : {}
						}, {
							noHideLoading
						}).then(res => {
							let data = []
							if (res.data.records) {
								data = res.data.records.map(item => ({
									...item,
									productRuleStr: item.productRule ? JSON.parse(item
											.productRule).map(item1 => item1.value).join(' ') :
										''
								}))
							}
							this.dataList = refresh ? (data || []) : [...this.dataList, ...(data || [])];
							if (res.data.total <= this.dataList.length) {
								this.end = true
							}
						}).finally(() => {
							resolve()
							this.loading = false
							this.initLoading = false
						})
					} else {
						resolve()
					}
				})
			},
			getOrderStatus(activeIndex) {
				let index = activeIndex ? activeIndex * 1 : 0
				switch (index) {
					case 1:
						// if (this.userType == 3) {
						// 	return 1
						// }
						return 2
					case 2:
						return 5
					case 3:
						return 10
					case 4:
						return 11
					default:
						break
				}
			},
			handleClickTab(index) {
				this.activeIndex = index
				if (index == 0) {
					const {
						orderStatus,
						...params
					} = this.params
					this.params = params
				} else {
					this.$set(this.params, 'orderStatus', this.getOrderStatus(index))
				}
				this.getData(true)
			},
			// 取消订单
			handleCancel(data) {
				if (data.procureOrderOrigin == 2 && this.appType == this.$base.ADMIN_TYPE) {
					this.$utils.showModal({
						content: '本订单为用户下单转单，请注意到经销商后台将用户下单取消',
						confirmText: '确认取消'
					}).then(() => {
						this.$utils.loading()
						api.get('/order/api/order/cancelByOrderId', {
							orderId: data.id,
							orderInfoId: ''
						}).then(res => {
							this.$utils.showToast('取消下单成功')
							this.getAllData()
						})
					})
				} else {
					this.$utils.showModal({
						content: '确认取消该订单？',
						confirmText: '确认取消'
					}).then(() => {
						this.$utils.loading()
						api.get('/order/api/order/cancelByOrderId', {
							orderId: data.id,
							orderInfoId: ''
						}).then(res => {
							this.$utils.showToast('取消下单成功')
							this.getAllData()
						})
					})
				}
			},
			// 确认订单
			handleConfirm(data, type) {
				if (type == 'goods') {
					if (data.waitPayFinal) {
						this.handleUploadPayment(data)
						return
					}
					this.$utils.showModal({
						content: '确认收货吗？'
					}).then(() => {
						this.$utils.loading()
						api.get('/order/api/order/confirmReceipt', {
							orderId: data.id
						}).then(res => {
							this.$utils.showToast('确认收货成功', 1500, 0, '', 'success')
							this.getAllData()
						})
					})
				} else if (type == 'install') {
					if (data.waitPayFinal) {
						this.handleUploadPayment(data)
						return
					}
					this.$utils.showModal({
						content: '确认安装吗？'
					}).then(() => {
						this.$utils.loading()
						api.get('/order/api/order/confirmInstall/', {
							orderId: data.id
						}).then(res => {
							this.$utils.showToast('确认安装成功', 1500, 0, '', 'success')
							this.getAllData()
						})
					})
				} else {
					if (this.$store.state.userType == 3) {
						this.$utils.showModal({
							content: '确认下单吗？',
						}).then(() => {
							this.$utils.loading()
							api.get('/order/api/order/jxsConfirmOrder/' + data.id).then(res => {
								this.$utils.showToast('确认下单成功', 1500, 0, '', 'success')
								this.getAllData()
							})
						})
						return
					}
					this.$utils.loading()
					api.get('/order/api/order/jxsConfirmOrder/' + data.id).then(res => {
						this.$utils.showToast('确认下单成功', 1500, 0, '', 'success')
						this.getAllData()
					})
				}
			},
			// 删除订单
			handleDelete(data) {
				this.$utils.showModal({
					content: '是否删除该记录？',
				}).then(() => {
					this.$utils.loading()
					api.get('/order/api/order/delOrder/' + data.id).then(res => {
						this.$utils.showToast('删除记录成功')
						this.getAllData()
					})
				})
			},
			// 上传支付凭证
			handleUploadPayment(data) {
				if (data.id) {
					let payAmount = null
					let certificateType = 1
					if (data.payType == 1) {
						payAmount = data.payAmount
					} else {
						if (data.orderStatus == 5) {
							payAmount = data.waitPayDeposit
						} else {
							payAmount = data.waitPayFinal
						}
					}
					if (data.payType == 1) {
						if (data.orderStatus == 5) {
							certificateType = 3
						} else {
							certificateType = 2
						}
					} else {
						if (data.orderStatus == 5)
							certificateType = 1
						if (data.orderStatus == 8||data.orderStatus == 10)
							certificateType = 2
					}

					uni.navigateTo({
						url: `/pages/person/pages/upload?id=${data.id}&payType=${data.payType}&type=payment&certificateType=${certificateType}&payAmount=${payAmount||0}`
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>

</style>